<!DOCTYPE html>
<html lang="en">

<head>
    <title>Responsive iFrame Test With Graphic</title>

    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="http://media.npr.org/favicon.ico" />

    <style type="text/css">
        /* base styles */
        html { -webkit-text-size-adjust: none; /* prevent font scaling in landscape */ }

        body {
            margin: 0;
            padding: 10px;
            background-color: #F7F7F7;
            font-family: Arial, Helvetica, sans-serif;
        }

        h1 {
            margin: 0 0 22px 0;
            font-size: 14px;
            color: #333;
        }

        h3 {
            font-weight: normal;
            color: #333;
            font-size: 16px;
            margin: 0 0 11px 0;
        }

        a, a:link, a:visited {
            color: #4774CC;
            text-decoration: none;
        }
        a:hover, a:active { opacity: 0.7; }

        .footnotes { margin-bottom: 20px; }
        .footnotes h4 {
            margin: 2px 0 7px 0;
            color: #666;
            font-size: 11px;
        }
        .footnotes p,
        .footer p {
            margin: 2px 0 0 0;
            font-size: 11px;
            line-height: 1.3;
            color: #808080;
        }

        /* chart */
        #graphic {
            width: 100%;
        }
        #graphic:before,
        #graphic:after {
            content: " "; /* 1 */
            display: table; /* 2 */
        }
        #graphic:after { clear: both; }

        #graphic img {
            max-width: 100%;
            height: auto;
        }

        #graphic svg {
            font-family: Arial, Helvetica, sans-serif;
            margin-bottom: 1em;
        }
        #graphic .axis {
            font-size: 12px;
            fill: #666;
        }
        #graphic .axis path,
        #graphic .axis line {
            fill: none;
            stroke: #666;
            shape-rendering: crispEdges;
        }
        #graphic .axis.y path { display: none; }
        #graphic .axis.y .tick line { display: none; }
        #graphic .grid path { display: none; }
        #graphic .grid .tick {
            stroke: #ccc;
            stroke-dasharray: 1px 3px;
            stroke-width: 1px;
            shape-rendering: crispEdges;
        }
        #graphic .line {
            fill: none;
            stroke-width: 3px;
        }

        #graphic .bars rect { fill: #17807E; }
        #graphic .label text,
        #graphic .value text {
            font-weight: normal;
            font-size: 12px;
            fill: #333;
            text-align: right;
        }
        #graphic .value text {
            fill: #fff;
            font-size: 11px;
        }

        #graphic .key {
            font-family: Arial, Helvetica, sans-serif;
            margin: 0 0 1em 0;
            padding: 0;
            list-style-type: none;
        }

        #graphic .key .key-item {
            display: inline-block;
            margin: 0 18px 0 0;
            padding: 0;
            line-height: 15px;
        }

        #graphic .key .key-item b {
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-right: 6px;
            float: left;
        }

        #graphic .key .key-item label {
            white-space: nowrap;
            font-size: 12px;
            color: #333;
            font-weight: normal;
        }

        .line-0 { stroke: #11605E; }
        .line-1 { stroke: #8BC0BF; }

        .key-0 b { background-color: #11605E; }
        .key-1 b { background-color: #8BC0BF; }
    </style>

</head>
<body>
    <h1>Average retail wages, seasonally adjusted (2008-2014)</h1>

    <div id="graphic"><img src="fallback-2.png" alt="[Chart]" /></div>

    <div class="footnotes">
        <h4>Note</h4>
        <p>Figures for February and March 2014 are preliminary.</p>
    </div>

    <div class="footer">
        <p>Source: Bureau of Labor Statistics</p>
        <p>Credit: NPR</p>
    </div>


    <script src="js/lib/jquery.js" type="text/javascript"></script>
    <script src="js/lib/d3.v3.min.js" type="text/javascript"></script>
    <script src="js/lib/modernizr.svg.min.js" type="text/javascript"></script>
    <script src="../../src/pym.js" type="text/javascript"></script>
    <script src="js/graphic-2.js" type="text/javascript"></script>
</body>
</html>
